<template>

  <el-dialog :title="form.id?'修改' : '添加'" :visible.sync="visible" width="500px" :close-on-click-modal="false" append-to-body @closed="$emit('dialog-close')">

    <el-form ref="main-form" :model="form" :rules="rules" size="mini" :inline="true" label-width="180px">

      <el-form-item label="商户(可多选)" prop="mchId">
        <el-select 
          v-model="form.mchId" 
          size="small" 
          filterable
          remote
          reserve-keyword
          placeholder="输入关键词搜索商户"
          clearable>
          <el-option
            v-for="item in terOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="网址（不用加http开头）" prop="url">
        <el-input placeholder="" v-model="form.url" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="审核状态" prop="reviewStatus">
        <el-select v-model="form.reviewStatus">
          <el-option v-for="item in approveStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit" size="mini" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import { approveStatusOptions } from '@/const/constant';
import ApiMain from '@/api/trade.website';
import MchTerApiMain from '@/api/mch.ter';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      visible: false,
      popDeleteVisible: false,
      loading: false,

      formRaw: null,
      form: {
        mchId: '',
        url  : '',
        id:'',
        reviewStatus: 2
      },

      rules: {
        mchId: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
        ],
      },

      data: {
        id:null
      },

      terOptions: [],
      approveStatusOptions: approveStatusOptions

    }
  },
  mounted () {
    this.formRaw = Object.copy(this.form);
    this.fetchMchTerOptions();
  },
 
  methods: {

    show (data = null) {
      this.reset();

      this.data = data;

      if (!!data) {
        for (var k in this.form) {
          if (this.data[k]) {
            this.form[k] = this.data[k];
          }
        }
      }

      this.visible = true;
    },

    reset () {
      this.form = Object.copy(this.formRaw);
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async fetchMchTerOptions () {
      this.terOptions = await MchTerApiMain.option();
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        if (!!this.data) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitSet () {

      var req = Object.copy(this.form);
      req.id = this.data.id;

      await ApiMain.set(req);
      
      this.$message({message: '修改成功', type: 'success'});
      this.visible = false;

    },

    async submitAdd () {

      var req = Object.copy(this.form);

      await ApiMain.add(req);
      this.$message({message: '添加成功', type: 'success'});
      this.visible = false;

    },
  }
}
</script>

<style>

</style>
